<template>
  <div class="card" @click="goSpace(allParams)">
    <div class="cover">
      <img class="img" v-lazy="coverPath + coverSize" />
    </div>
    <div class="content">
      <span class="type" v-if="typeShow"><i class="fa fa-up-zhu"></i> Up主</span>
      <span class="title">{{name}}</span>
      <span class="sign"><span class="fans">粉丝：{{fans}}</span><span class="videos">视频：{{videos}}</span></span>
      <span class="sign">{{sign}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserItem',
  inject: ['rootRouter'],
  props: {
    coverPath: {
      type: String
    },
    // 封面图尺寸
    coverSize: {
      type: String,
      default: '@120w_120h_1c.png'
    },
    name: {
      type: String
    },
    sign: {
      type: String
    },
    fans: {
      type: Number
    },
    videos: {
      type: Number
    },
    typeShow: {
      type: Boolean,
      default: false
    },
    allParams: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    goSpace (allParams) {
      const { mid } = allParams
      this.rootRouter.push({ name: 'space', params: { mid } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .card {
    display: flex;
    padding: rem(10px);
    .cover {
      @include cover(120, 120, 50%);
      width: rem(60px);
      height: rem(60px);
    }
    .content{
      width: rem(260px);
      display: flex;
      flex-direction: column;
      margin-left: rem(10px);
      font-size: rem(14px);
      color: $color-text-primary;
      .fa {
        margin-right: rem(5px);
      }
    }
    .title{
      @include max-lines(2);
    }
    .fans {
      margin-right: rem(10px);
    }
    .sign{
      margin-top: rem(5px);;
      @include max-lines(1);
      color: $color-text-secondary;
      font-size: rem(12px);
      height: rem(12px);
      line-height: rem(12px);
    }
  }
</style>
